<script>
export default {
  data() {
    return {
      activeIndex: '',
      uniFabContent: [
        {
          text: '删除单据'
        },
        {
          text: '批量变价'
        },
      ],
      options: [
        { label: "商品品项数", name: "c_goods_num", occupy: true },
        { label: "盘盈数量", name: "c_yp_num" },
        { label: "部门", name: "c_adno" },
        { label: "盘亏数量", name: "c_pk_num" },
        { label: "商品品项数", name: "c_goods_pxs" },
        { label: "制单人", name: "c_user" },
      ],
      options3: {
        leftParam: 'name',  //左侧内容
        centerParam: 'price',  //中间内容
        rightParam: 'status',  //右侧内容
        rightParamColor: 'statusColor',  //右侧文字颜色,默认#666666
      },
      origData: {
        main: {
          "c_tenant_id": "8",
          "c_id": "PD12310070006",
          "c_bill_type": "761",
          "c_status": "0",
          "c_mk_type": "1",
          "c_gmode": "0",
          "c_store_id": "11001",
          "c_wno": "00",
          "c_adno": "",
          "c_org_no": null,
          "c_charge_userno": null,
          "c_progress": "2",
          "c_plan_id": "PJ12310070001",
          "c_count_dt": "2023-10-07 00:00:00.000",
          "c_count_time": "0",
          "c_is_inv": "1",
          "c_inv_dt": "2023-10-08 00:16:24.693",
          "c_inv_userno": "0382",
          "c_inv_cond": null,
          "c_count_userno": "0382",
          "c_count_userno2": "0382",
          "c_mode2": "0",
          "c_mode3": "0",
          "c_adj_rule2": "1",
          "c_adj_rule3": "1",
          "c_acc_mode": "0",
          "c_p_bill_type": "751",
          "c_l_bill_type": "751",
          "c_clear_mode": "0",
          "c_n_p": 0,
          "c_at_pay_p": 0,
          "c_aet_pay_p": 0,
          "c_at_cost_p": 0,
          "c_aet_cost_p": 0,
          "c_at_sale_p": 0,
          "c_n_l": 0,
          "c_at_pay_l": 0,
          "c_aet_pay_l": 0,
          "c_at_cost_l": 0,
          "c_aet_cost_l": 0,
          "c_at_sale_l": 0,
          "c_mk_store_id": "",
          "c_mk_dt": "2023-10-07 17:53:47.447",
          "c_mk_userno": "0382",
          "c_approve_status": "1",
          "c_approve_dt": "2023-10-07 17:53:47.447",
          "c_au_dt": null,
          "c_au_userno": null,
          "c_void_dt": null,
          "c_void_userno": null,
          "c_print_dt": null,
          "c_print_userno": null,
          "c_print_n": 0,
          "c_src_id": "PJ12310070001",
          "c_src_type": "B01",
          "c_note": null,
          "c_sys_note": null,
          "c_is_weight": "%",
          "c_bcode": null,
          "c_count_type": "5",
          "c_apply_type": "%",
          "c_count_i_spit": null
        }, // 主表
        details: [
          {
            "c_goods_num": "2",
            "c_yp_num": "2080",
            "c_pk_num": "1",
            "c_goods_pxs": "[00]本部",
            "c_user": "[0001]昂小E",
            "c_type": "1",
            "c_adno": "[150]进口食品",
            "c_tenant_id": "8",
            "c_status": "0",
            "c_id": "PD12310070006",
            "c_date": "11/07",
            "c_gsort": 1,
            "c_gcode": "0000170",
            "c_barcode": "6920352550562",
            "c_ccode": "1200000",
            "c_bcode": "",
          },
          {
            "c_goods_num": "2",
            "c_yp_num": "2080",
            "c_pk_num": "1",
            "c_goods_pxs": "[00]本部",
            "c_user": "[0001]昂小E",
            "c_type": "2",
            "c_adno": "[150]进口食品",
            "c_tenant_id": "8",
            "c_status": "1",
            "c_id": "PD12310070006",
            "c_date": "11/07",
            "c_gsort": 1,
            "c_gcode": "0000170",
            "c_barcode": "6920352550562",
            "c_ccode": "1200000",
            "c_bcode": "",
          },
          {
            "c_goods_num": "2",
            "c_yp_num": "2080",
            "c_pk_num": "1",
            "c_goods_pxs": "[00]本部",
            "c_user": "[0001]昂小E",
            "c_type": "3",
            "c_adno": "[150]进口食品",
            "c_tenant_id": "8",
            "c_status": "2",
            "c_id": "PD12310070006",
            "c_date": "11/07",
            "c_gsort": 1,
            "c_gcode": "0000170",
            "c_barcode": "6920352550562",
            "c_ccode": "1200000",
            "c_bcode": "",
          },
          {
            "c_goods_num": "2",
            "c_yp_num": "2080",
            "c_pk_num": "1",
            "c_goods_pxs": "[00]本部",
            "c_user": "[0001]昂小E",
            "c_type": "4",
            "c_adno": "[150]进口食品",
            "c_tenant_id": "8",
            "c_status": "3",
            "c_id": "PD12310070006",
            "c_date": "11/07",
            "c_gsort": 1,
            "c_gcode": "0000170",
            "c_barcode": "6920352550562",
            "c_ccode": "1200000",
            "c_bcode": "",
          },
        ], // 样式1明细
        details2: [
          {title: '无货架', name: '格来德WKF-318S电水壶', barcode: '025453/6932528410730', num: 5},
          {title: '无货架', name: '格来德WKF-318S电水壶', barcode: '025453/6932528410730', num: 5},
          {title: '无货架', name: '格来德WKF-318S电水壶', barcode: '025453/6932528410730', num: 5},
          {title: '无货架', name: '格来德WKF-318S电水壶', barcode: '025453/6932528410730', num: 5},
          {title: '无货架', name: '格来德WKF-318S电水壶', barcode: '025453/6932528410730', num: 5},
        ],  //样式2明细
      },
      details3: [
        {name: 'A001 NIKE', price: '30.00', status: '已补录'},
        {name: 'A002 安踏', price: '300.00', status: '未补录'},
        {name: 'A004 361°', price: '30000.00', status: '未补录', statusColor: '#FF7E00'},
        {name: 'A005 喜茶', price: '', status: '异常', statusColor: '#F95C19'},
      ],  //样式3明细
    }
  },
  methods: {
    trigger(e) {
      console.log(e)
      this.content[e.index].active = !e.item.active
      uni.showModal({
        title: '提示',
        content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    fabClick(e) {
      this.activeIndex = e;
    },
    onClickGoToDetail(payload) {
      console.log('onClickGoToDetail: ', payload)
    },
    addData() {
      this.details3.push({name: 'A005 喜茶', price: '', status: '异常', statusColor: '#F95C19'})
    },
    buttonClick(e) {
      console.log('=====buttonClick: ', e);
    }
  }
}
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "VirtualList"
  }
}
</route>

<template>
  <view class="content">
    <view class="m-temp">
      <text>样式1</text>
    </view>
    <eui-virtual-list @itemClick="onClickGoToDetail" :origList="origData.details" :options="options" isBottom="true" :buttonName="'盘点录入'" type="list">
      <template v-slot:bottom="scope">
        <eui-fab direction="vertical" :content='uniFabContent' @trigger="trigger" @fabClick="fabClick" :activeIndex="activeIndex" :fabIndex="scope._index" />
        <view>
          <eui-button :modelValue="scope" type="min2" title="编辑" @buttonClick="buttonClick" />
        </view>
        <view>
          <eui-button :modelValue="scope" type="min" title="审核" @buttonClick="buttonClick" />
        </view>
      </template>
    </eui-virtual-list>

    <eui-virtual-list @itemClick="onClickGoToDetail" :origList="origData.details"  isBottom="true" :buttonName="'盘点录入'" type="list">
      <template v-slot:list="scope">
        <eui-text title="部门" value="02" type="name2" />
      </template>
      <template v-slot:bottom="scope">
        <view>
          <eui-button :modelValue="scope" type="min" title="审核" @buttonClick="buttonClick" />
        </view>
      </template>
    </eui-virtual-list>

    <view class="m-temp">
      <text>样式2</text>
    </view>
    <eui-virtual-list @itemClick="onClickGoToDetail" :origList="origData.details2" :options="true" :isBottom="false" :showIndex="true" type="list2" />

    <view class="m-temp">
      <text>样式1+插槽</text>
    </view>
    <eui-virtual-list :origList="origData.details" type="list">
      <template v-slot:list="scope">
        <eui-text title="商品品项数" :value="scope.c_goods_num" type="name2" />
        <eui-text title="盘盈数量" :value="scope.c_yp_num" type="name2" />
        <eui-text title="部门" :value="scope.c_adno" type="name2" />
        <eui-text title="制单人" :value="scope.c_user" type="name2" />
      </template>
    </eui-virtual-list>

    <view class="m-temp">
      <text>样式3</text>
    </view>
    <eui-virtual-list @itemClick="onClickGoToDetail" :origList="details3" :options="options3" type="list3" />

    <eui-button title="增加数据" @buttonClick="addData"></eui-button>
  </view>
</template>

<style lang="scss">
@import '@/main.scss';
.content {
  background-color: #F4F4F4;
  display: flex;
  padding: 0;
  width: 100%;
  height: auto;
  flex-direction: column;
}
.m-temp {
  display: flex;
  width: 100%;
  height: 75rpx;
  align-items: flex-end;
  color: #000000;
  font-size: 32rpx;
  padding: 0 0 10rpx 20rpx;
}
.item-text {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level4;
  color: $uni-text-color-hint;
  line-height: 37px;
  text-align: left;
  font-style: normal;
  margin-right: 16rpx;
}
.item-text-detail {
  color: $uni-text-color-primary;
}
</style>
